<template>
    <view class="container">

		
        <view class="container-body" v-for="(item,index) in list" >
		
				<view class="card-1">
					<cover-image class="img1" :src=item.image></cover-image>
					<p style="margin-top: 20rpx;margin-left: 20rpx; text-align: start; width: 100%;">{{item.deptName}}</p>
					<p style="margin-top: 20rpx;margin-left: 20rpx; text-align: start; width: 100%;">{{item.doctorName}}</p>
				</view>
				<view class="card-2">
				<view style="display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center;">
				<p style="margin-top: 20rpx; text-align: center; width: 100%;">{{item.appointmentDate}}</p>
				<p style="font-size: 15px;margin-top: 20rpx; color: blue;">{{item.appointmentPeriod}}</p>
				</view>
				</view>
				<view class="card-3">
					<view style="display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: flex-end; align-items: flex-start;">
					<p style="font-size: 15px; color: blue; margin-bottom: 20rpx;margin-right: 30rpx; width: 90%; text-align: end;">当前位次:{{item.appointmentNum}}</p>
					</view>
					<view style="display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: flex-start;">
						<el-button type="primary" style="margin-top: 10rpx;" @click="getOrders">刷新位次信息</el-button>
					</view>
				</view>
        </view>
 
    </view>
</template>

<script lang="ts" setup>
  
    import axiosInstance from '@/Config/axiosConfig'
    import globalStore from '@/store/GlobalStore';
    import Emessage from '@/Utils/Message';
	import {onMounted,onUnmounted,watch} from 'vue'
	import { h, ref, shallowRef } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import DoctorApp from '../../entity/DoctorApp';
	const list=ref<DoctorApp>();
	const item=ref({
		image:"../static/person.png",
		deptName:"儿科",
		doctorName:"小明",
		appointmentDate:"预约时间",
		appointmentPeriod:"预约周期",
		appointmentNum:"位次" 	
	})
	const v=ref();
	const getOrders=async()=>{
		try{
			const response=await axiosInstance.post('/patient/getOrder',{
				patientId:globalStore.patientid
			});
			if(response.data.code ==200){
				list.value=response.data.data
				for(let i=0;i<list.value.length;i++){
					if(list.value[i].appointmentNum<=1)Emessage("到你了","success")
				}
			Emessage("获取成功","success")
		}
		}catch(e){
			Emessage("网络错误","error")
		}
	
	}
const flag=ref();
	onLoad((option)=>{
		getOrders();
		flag.value=setInterval(()=>{getOrders()},10000)
	})
	onUnmounted(()=>{
		clearInterval(flag);
	})

  //去到医生排班的页面
  const goArrange=()=>{
	  
	  
  }

</script>

<style scoped>
   .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
			overflow-y: hidden;
	
    }

   .container-title {
        width: 100%;
        height: 70rpx;
        display: flex;
        flex-direction: row;
        justify-items: center;

    }

   .container-body {
        width: 90%;
        display: flex;
        flex-direction: column;
        padding: 10rpx;
		overflow-y: hidden;
		border-style: solid;
		  border-color: black;
		
    }
	.container-body::-webkit-scrollbar {
	    width: 0; /* 水平滚动条宽度设为0 */
	}

	.card-1{
		width: 90%;
		height: 100%;
		display: flex;
		margin-left: 5%;
		flex-direction: column;

	}
	.card-2{
		
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-right: 15rpx;

	}
.text {
    padding: 10rpx;
    width: 95%;
    height: 90%;
    margin: auto;
    border: 1px solid gainsboro;
    word-wrap: break-word; /* 长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器的替代方案 */
	overflow: hidden;
    word-break: break-word; /* 长单词与非单词内容都能换行 */
}

	.card-3{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.card-3-app{
		display: flex;
		border-radius: 10rpx;
		flex-direction: column;
		width: 100%;
		height: 80%;
		overflow-x: hidden;
	}
	.card-3-app::-webkit-scrollbar {
	    width: 0; /* 水平滚动条宽度设为0 */
	}
	.order{
       border-radius: 10rpx;
        border: 2px solid gainsboro;
        margin-left: 20rpx;
		margin-top: 20rpx ;
        width: 90%;
        height: 100rpx;
        display: flex;
        flex-direction: row;
	
	}
   .img1 {
        border-radius: 120rpx;
        width: 120rpx;
        height: 120rpx;
		
		margin-top: 20rpx;
		margin-left: 10rpx;
    }

</style>